<template>
  <section>
    <div class="top">
      <div class="back" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
        <span>返回</span>
      </div>
    </div>
    <div class="bottom" v-if="active === 1">
      <p class="title">你想将这项调查发给谁？</p>
      <div class="flex-row">
        <div class="btn-group">
          <div class="btn" @click="changeActive(3)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tuandui"></use>
            </svg>
          </div>
          <span>消费者</span>
          <p class="des">让消费者来回答这项调查</p>
        </div>
        <div class="btn-group">
          <div class="btn" @click="changeActive(2)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-liebiao"></use>
            </svg>
          </div>
          <span>我的名单</span>
          <p class="des">发送到我自己的收件人列表 100人内免费</p>
        </div>
      </div>
    </div>
    <div class="bottom" v-if="active === 2">
      <p class="title">选择你的计划</p>
      <div class="flex-row">
        <div class="btn-group"
        v-for="(value, index) in myList" :key="index">
          <div class="btn" @click="[value.desc1 === '免费' ? changeActive(5, value.value, value.id) : changeActive(4, 0, value.id, value.value)]">{{value.desc1}}</div>
          <span>${{value.desc2}}</span>
          <p class="des">{{value.desc3}}</p>
        </div>
      </div>
    </div>
    <div class="bottom" v-if="active === 3">
      <p class="title">你需要多少调查对象？</p>
      <div class="flex-row">
        <div class="btn-group"
        v-for="(value, index) in consumerList" :key="index">
            <div class="btn" @click="changeActive(4, value.value, value.id)">{{value.desc1}}</div>
            <span>{{value.desc2}}</span>
            <p class="des">{{value.desc3}}</p>
        </div>
      </div>
    </div>
    <div class="bottom" v-if="active === 4">
      <div class="flex-column">
        <div class="money" v-if="this.survey.type == 0">
          <input type="number" v-model.number="count" @change="countM"> * {{Qs}} * ￥{{perQ}}
        </div>
        <div class="money" v-if="this.survey.type == 1">
          <input type="number" v-model.number="count" @change="countM"> + {{Qs}} * ￥{{perQ}}
        </div>
        <div class="desc">
          <div class="desc-money">调查人数</div>
          <div class="desc-money">问题</div>
          <div class="desc-money">每道问题</div>
        </div>
        <div class="total">￥{{total}}</div>
        <div class="pay" @click="addSurvey">确认支付</div>
      </div>
    </div>
    <div class="bottom" v-if="active === 5">
      <div class="flex-column free">
        <p>免费</p>
        <span>最高上限100人</span>
        <div class="flex-column" @click="addSurvey">发送免费调查</div>
      </div>
    </div>
  </section>
</template>

<script>
import {findCondition, addSurvey} from '@/api/survey'
import { check } from '@/api/common'
import { pay } from '@/api/pay'

export default {
  name: 'survey5',
  data () {
    return {
      count: 0,                             // 选择发布问卷的份数
      perQ: 0.1,                            // 每道题目的价格
      Qs: 0,                                // 题目的数量
      total: 0,                             // 总价
      active: 1,                            // 显示控制
      beforeActive: [],                     // 显示控制
      consumerList: [],                     // 消费者选项列表
      myList: []                            // 我的列表
    }
  },
  created () {
    this.initial()
  },

  props: [
    'survey'
  ],

  methods: {
    changeActive (index, count, id, price) {
      if (index === 2) {                         //  我的名单
        this.survey.type = 1
      }

      if (index === 3) {                         // 消费者
        this.survey.type = 0
      }

      if (index === 4 || index === 5) {
        this.survey.personNum = count
        this.survey.personTypeId = id
      }

      if (price > 0 && this.survey.type === 1) {
        this.count = price
        this.Qs = this.survey.questionList.length
      }

      this.beforeActive.push(this.active)
      if (count) {
        this.count = count
        this.Qs = this.survey.questionList.length
        this.countM()
      }
      this.active = index
    },                                      // 显示控制
    back () {
      if (this.beforeActive.length >= 1) {
        this.active = this.beforeActive.pop()
      } else {
        this.$router.go(-1)
      }
    },                                      // 返回主菜单
    countM () {
      if (this.survey.type === 0) {
        this.total = (this.count * this.perQ * this.Qs).toFixed(1)
      } else if (this.survey.type === 1) {
        this.total = (this.count + this.perQ * this.Qs).toFixed(1)
      }
    },
    addSurvey () {                       // 添加调查问卷
      this.survey.uid = localStorage.uid

      let form = {
        data: this.survey,
        token: localStorage.token
      }

      addSurvey(JSON.stringify(form)).then(
        (data) => {
          if (check(data)) {
            let formData1 = {
              mail: this.mail,
              password: this.password,
              type: 1
            }
            pay(formData1).then(
              (data) => {
                window.location.href = data.data.data
              }
            )
            // this.$router.push({
            //   name: 'homeIndex'
            // })
          }
        }
      )
    },                                   // 计算价格
    initial () {
      let formData = {
        data: {
          uid: localStorage.uid
        },
        token: localStorage.token
      }
      findCondition(JSON.stringify(formData)).then(
        (data) => {
          this.consumerList = data.data.data.consumerList.sort((a, b) => {
            return a.sort - b.sort
          })
          this.myList = data.data.data.myList.sort((a, b) => {
            return a.sort - b.sort
          })
          this.perQ = data.data.data.price
        }
      )
    }                                       // 初始化数据
  }
}
</script>

<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 99;
}
.top,
.bottom {
  overflow-x: scroll;
  width: 100vw;
  height: 50vh;
  background-color: #00DD00;
}
.back {
  padding: 30px;
  display: flex;
  align-items: center;
  span {
    color: #fff;
    font-size: 40px;
  }
}
.icon {
  width: 40px;
  height: 40px;
  color: #fff;
}
.btn-group {
  flex: none;
  width: 50vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  span {
    font-weight: bolder;
    color: #000;
    font-size: 40px;
  }
  .btn {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    font-size: 40px;
    .icon {
      width: 150px;
      height: 150px;
      color: #666;
    }
  }
  .des {
    font-size: 30px;
  }
}
.flex-row {
  margin-top: 120px;
  flex-wrap: nowrap;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.bottom {
  position: relative;
  background-color: #fff;
  p {
    padding: 40px;
    text-align: center;
    font-size: 40px;
  }
  .title {
    width: 100%;
    position: fixed;
    padding: 40px 0;
  }
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  &.free {
    height: 100%;
    p {
      flex: none;
      font-size: 80px;
      color: #333;
      margin-top: 180px;
      padding: 0;
    }
    span {
      flex: 1;
      font-size: 20px;
      color: #999;
    }
    div {
      border-radius: 10px;
      margin: 30px 0;
      width: 690px;
      height: 96px;
      color: #fff;
      background-color: #0091ce;
    }
  }
}
.money,
.total {
  width: 690px;
  height: 100px;
  font-size: 80px;
  text-align: end;
  margin-top: 100px;
  input {
    width: 200px;
    font-size: 80px;
    border: none;
    text-align: end;
  }
}
.desc {
  width: 650px;
}
.desc-money {
  display: inline-block;
  font-size: 20px;
  color: #999;
  margin: 10px 40px;
  transform: translateX(180px);
}
.total {
  position: relative;
  flex: 1;
  border-top: 2px solid #999;
  margin: 0;
  margin-bottom: 50px;
  &::after {
    content: '总价';
    position: absolute;
    top: 110px;
    right: 90px;
    font-size: 20px;
    color: #999;
  }
}
.pay {
  margin: 30px 0;
  border-radius: 10px;
  width: 690px;
  height: 96px;
  background-color:#0091ce;
  font-size: 40px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
